<template>
    <div class="app-container">
      <el-select class="selector" v-model="selected_category" placeholder="请选择您的展示方式">
        <el-option v-for="(category,index) in categories" :key="index" :label="category.label" :value="category.value"></el-option>
      </el-select>
      <el-select class="selector" v-model="selected_store" placeholder="请选择您的展示店铺">
        <el-option v-for="(store,index) in stores" :key="index" :label="store" :value="store"></el-option>
      </el-select>
      <el-select class="selector" v-model="selected_commodity" placeholder="请选择您的展示商品">
        <el-option v-for="(commodity,index) in commodities" :key="index" :label="commodity" :value="commodity"></el-option>
      </el-select>
      <br>
      <label>开始时间</label><input type="datetime-local" class="time-input" v-model="start_date">
      <label>结束时间</label><input type="datetime-local" class="time-input" v-model="end_date">
      <br>
      <el-button class="confirm-button" @click="update">确定</el-button>
      <div id="chart"></div>
    </div>
  </template>

<style>
.el-input__wrapper{
  width: 260px;
  height: 50px;
  border-radius: 20px;
}
</style>

<style scoped>
#chart{
  width: 1000px;
  height: 450px;
  border: 3px solid rgba(9, 9, 9, 0.218);
  border-radius: 15px;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
label,.time-input{
  width: 100px;
  height: 50px;
  margin-left: 20px;
  margin-bottom: 20px;
}
label{
  color: rgba(0, 0, 0, 0.547);
}
.time-input{
  width: 300px;
}
.time-input{
  border-radius: 15px;
  border: 1px solid rgba(164, 160, 160, 0.7);
}
.header{
  color:rgba(0, 0, 0, 0.547);
  height:30px;
}
.selector{
  width: 260px;
  height: 50px;
  margin-left: 20px;
  margin-bottom: 15px;
}
.confirm-button{
  width: 800px;
  height: 50px;
  margin-bottom: 30px;
  border-radius: 20px;
}
</style>

<script>
import * as echarts from 'echarts';
import moment from 'moment';
import {getRange,getStores,getdata} from '@/api/manage/theft.js';
import {getCommodities} from '@/api/manage/display.js';
// import {getRange} from "../../../../api/manage/theft";

export default {
  data(){
      return {
        categories:[
          {
            label:"monthly",
            value:"/frequency/monthly"
          },{
            label:"daily",
            value:"/frequency/daily"
          },{
            label:"hourly",
            value:"/frequency/hourly"
          }
        ],
        stores:['all'],
        commodities:['all'],
        selected_category:"",
        selected_store:"",
        selected_commodity:"",
        using_data:{},
        keys:[],
        start_date:'',
        end_date:'',
        values:[]
      }
  },
  mounted(){
    this.get_all_stores();
    this.get_all_commodities();
    this.get_time_range();
    this.draw();
  },
  watch:{
    using_data:{
      deep:true,
      handler:function(){
        this.keys = Object.keys(this.using_data);
        this.values = Object.values(this.using_data);
        this.draw();
      }
    }
  },
  methods: {
    update(){
      if(this.selected_category=="" || this.selected_store=="" || this.start_date=="" || this.end_date==""){
        this.$message.warning("请先选择可视化内容");
        return;
      }
      this.get_data(this.selected_category,this.selected_store,this.selected_commodity);
      console.log(this.start_date,this.end_date);
    },
    // 获取时间范围
    get_time_range(){
      getRange().then(res=>{
        if(res.status==200){
          this.start_date = moment(res.data.start_date);
          this.end_date = moment(res.data.end_date);
          this.start_date = this.start_date.format('YYYY-MM-DDTHH:mm:ss');
          this.end_date = this.end_date.format('YYYY-MM-DDTHH:mm:ss');
          // this.$message.success("时间数据返回成功");
          console.log(this.start_date,this.end_date);
        }
        else {
          this.start_date = '';
          this.end_date = '';
          // this.$message.error("时间数据获取失败");
        }
      })
    },
    // 获取所有的商店
    get_all_stores(){
      getStores().then(res=>{
        if(res.status==200){
          this.stores = res.data.stores;
          // this.$message.success("商店数据返回成功");
        }
        else{
          this.stores = [];
          // this.$message.error("商店数据获取失败");
        }
      })
    },
    // 获取所有的商品
    get_all_commodities(){
      getCommodities().then(res=>{
        if(res.status==200){
          this.commodities = ['all'];
          for(let i = 0;i<res.data.commodities.length;i++){
            this.commodities.push(res.data.commodities[i]);
          }
          // this.$message.success("商品数据返回成功");
        }
        else{
          this.commodities = ['all'];
          // this.$message.error("商品数据获取失败");
        }
      })
    },
    // 获取不同时间维度的防盗数据
    get_data(category,store_id,commodity){
      if(store_id=="all"){
        store_id = -1; // -1代表所有的店铺
      }
      if(commodity=="all"){
        commodity = -1;  // -1代表所有的商品
      }
      let url = "http://192.168.6.134:5000/theft"+category;
      getdata({
        'store_id':store_id,
        'start_date':this.start_date,
        'end_date':this.end_date,
        'commodity':commodity
      },category).then(res=>{
        this.using_data = res.data;
        if(res.status==200){
          this.using_data = res.data;
          // this.$message.success("数据获取成功");
        }
        else {
          this.using_data = [];
          // this.$message.error("服务器错误");
        }
      })
    },
    draw(){
      var chartDom = document.getElementById('chart');
      var myChart = echarts.init(chartDom);
      var option = {
        // 放置鼠标显示数据
        tooltip: {
          trigger: 'axis',
          // 位置
          position: function (pt) {
            return [pt[0], '10%'];
          }
        },
        title: {
          left: 'center',
          text: '防盗数据展示'
        },
        xAxis: {
          data: this.keys,
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          // 分别决定上下空白
          boundaryGap: [0, '10%']
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
          {
            start: 0,
            end: 100
          }
        ],
        series: [{
          type: 'line',
          data: this.values
        }]
      };

      myChart.setOption(option);
    }
  },
}
</script>
